<template>
  <t-table
    row-key="id"
    table-layout="auto"
    :data="store.getGoods()"
    :columns="columns"
    hover
    bordered
  >
    <template #name="{ row }">
      <t-input v-model="row.goods_name" autoWidth style="min-width:120px" />
    </template>
    <template #sname="{ row }">
      <t-input v-model="row.goods_data.sname" autoWidth style="min-width:120px" />
    </template>
    <template #count="{ row }">
      <t-input-number v-model="row.count" @change="store.update()" theme="normal" align="center" autoWidth />
    </template>
    <template #price="{ row }">
      <t-input-number :value="Number(row.price)" @change="value => { row.price = value; store.update() }" theme="normal" align="center"  autoWidth />
    </template>
    <template #discount="{ row }">
      <t-input-number :value="Number(row.discount)" @change="value => { row.discount = value; store.update() }"  theme="normal" align="center"  autoWidth />
    </template>
    <template #tax="{ row, rowIndex }">
      <t-tag theme="primary" variant="light" @click="emit('tax', rowIndex)">
        {{ row.tax }}%
      </t-tag>
    </template> 
    <template #req="{ row, rowIndex }">
      <t-tag theme="success" variant="light" @click="emit('tax', rowIndex)">
        {{ row.req }}%
      </t-tag>
    </template> 
    <template #money_tax="{ row }">
      {{ app.money.format(row.money_tax) }}
    </template> 
    <template #money="{ row }">
      <b>{{ app.money.format(row.money) }}</b>
    </template> 
    <template #left="{ rowIndex }">
      <t-button theme="primary" shape="square" variant="text" @click="emit('search', rowIndex)">
        <template #icon>
          <t-icon name="search" size="20px" />
        </template>
      </t-button>
    </template>
    <template #right="{ rowIndex }">
      <t-button shape="square" variant="text" @click="store.copy(rowIndex)">
        <template #icon>
          <t-icon name="chevron-down" size="20px" />
        </template>
      </t-button>
      <t-button theme="danger" shape="square" variant="text" @click="store.del(rowIndex)">
        <template #icon>
          <t-icon name="close" size="20px" />
        </template>
      </t-button>
    </template>
  </t-table>
</template>
<script setup>
  import { ref, watch } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import store from './store'

  const emit = defineEmits(['update', 'search', 'tax'])
  const plugin = index.plugin
  const columns = ref([])

  // 基础固定
  const left = [{
    colKey: 'left',
    cell: 'left',
    fixed: 'left',
    width: 60
  }, {
    title: plugin.t('goods.name'),
    colKey: 'name',
    cell: 'name'
  }, {
    title: plugin.t('goods.sname'),
    colKey: 'sname',
    cell: 'sname'
  }, {
    title: plugin.t('goods.count'),
    colKey: 'count',
    cell: 'count',
    align: 'center'
  }, {
    title: plugin.t('goods.price'),
    colKey: 'price',
    cell: 'price',
    align: 'center'
  }, {
    title: plugin.t('goods.discount'),
    colKey: 'discount',
    cell: 'discount',
    align: 'center'
  }, {
    title: plugin.t('goods.tax'),
    colKey: 'tax',
    cell: 'tax',
    align: 'center'
  }]

  const right = [{
    title: plugin.t('goods.money_tax'),
    colKey: 'money_tax',
    cell: 'money_tax',
    align: 'center'
  }, {
    title: plugin.t('goods.money'),
    colKey: 'money',
    cell: 'money',
    align: 'center'
  }, {
    colKey: 'right',
    align: 'right',
    cell: 'right',
    fixed: 'right',
    width: 95
  }]

  // 个体税字段
  const req = {
    title: plugin.t('goods.req'),
    colKey: 'req',
    cell: 'req',
    align: 'center'
  }

  // 拼成表头
  const handle = () => {
    // 附加字段
    const other = []

    // 判断客户类型
    if(store.clientType()) {
      other.push(req)
    }

    columns.value = [...left, ...other, ...right]
  }

  // 监听客户变动
  watch(() => store.getData().client_id, () => handle()) 
  
  handle()
</script>

